document.write("<style type='text/css'>.ball_one { background-image:url('" + $sreensaver + "'); background-position: -66px -58px; }.ball_two { background-image:url('" + $sreensaver + "'); background-position: -66px -126px;}.ball_three { background-image:url('" + $sreensaver + "'); background-position: -66px -194px; }.ball_four { background-image:url('" + $sreensaver + "'); background-position: -66px -263px; }.ball_five { background-image:url('" + $sreensaver + "'); background-position: -66px -331px; }.ball_six { background-image:url('" + $sreensaver + "'); background-position: -66px -399px; }#start, #stop, #change { width:100px; height:28px;}</style>");
var T$ = function(id) { return document.getElementById(id); }
var $extend = function(des, src) { for (var p in src) { des[p] = src[p]} return des; }

var Bubble = function() {
	// 小球随机样式
	var clss = ['ball_one', 'ball_two',  'ball_three', 'ball_four', 'ball_five', 'ball_six'];
	var Ball = function(radius, clsname) {
		var ball = document.createElement('div');
		ball.className = clsname;
		with(ball.style) {
			width = height = (radius || 10) + 'px';  position = 'absolute'; 
		}
		return ball;
	};
	
	// 屏保主类
	var Screen = function(cid, config) {
		var self = this;
		if (!(self instanceof Screen)) {
			return new Screen(cid, config);
		} 
		self.container = T$(cid);
		if (!self.container) return; 
		config = $extend(Screen.Config, config || {});
		// 配置属性
		self.ballsnum = config.ballsnum;
		self.diameter = 55;
		self.radius = self.diameter / 2;
		self.bounce = config.bounce;
		self.spring = config.spring;
		self.gravity = config.gravity;
		self.balls = [];
		self.timer = null;
		// 上下左右边界
		self.T_bound = 0;
		self.B_bound = self.container.clientHeight;
		self.L_bound = 0;
		self.R_bound = self.container.clientWidth;
	};
	
	// 静态属性
	Screen.Config = {
		ballsnum: 5,   // 小球数目
		spring: 0.8,   // 弹力加速度
		bounce: -0.95, // 反弹
		gravity: 0.1   // 重力
	};

	Screen.prototype = {
		initialize: function() {
			var self = this;
			// 生成小球
			self.createBalls();
			// 侦听碰撞
			self.timer = setInterval(function() {
				self.hitTest();
			}, 32);
		},
		createBalls: function() {
			var self = this, num = self.ballsnum, i = 0;
			var frag = document.createDocumentFragment();
			for (; i < num; i++) {
				var ball = new Ball(self.diameter, clss[Math.floor(Math.random() * (clss.length - 1))]);
				ball.radius = self.radius;
				ball.diameter = self.diameter;
				ball.style.left = (Math.random() * self.B_bound) + 'px';
				ball.style.top = (Math.random() * self.R_bound) + 'px';
				ball.vx = Math.random() * 6 - 3;
				ball.vy = Math.random() * 6 - 3;
				frag.appendChild(ball);
				self.balls[i] = ball;
			}
			self.container.appendChild(frag);
		},
		// 碰撞检测
		hitTest: function() {
			var self = this, num = self.ballsnum, balls = self.balls;
			for (var i = 0; i < num - 1; i++) {
				var ball0 = balls[i];
				ball0.x = ball0.offsetLeft + ball0.radius;
				ball0.y = ball0.offsetTop + ball0.radius;
				for (var j = i + 1; j < num; j++) {
					var ball1 = balls[j];
					ball1.x = ball1.offsetLeft + ball1.radius;
					ball1.y = ball1.offsetTop + ball1.radius;
					var dx = ball1.x - ball0.x;
					var dy = ball1.y - ball0.y;
					var dist = Math.sqrt(dx * dx + dy * dy);
					var misDist = ball0.radius + ball1.radius;
					if (dist < misDist) {
						var angle = Math.atan2(dy, dx);
						var tx = ball0.x + Math.cos(angle) * misDist;
						var ty = ball0.y + Math.sin(angle) * misDist;
						var ax = (tx - ball1.x) * self.spring;
						var ay = (ty - ball1.y) * self.spring;
						ball0.vx -= ax;
						ball0.vy -= ay;
						ball1.vx += ax;
						ball1.vy += ay;
					} 
				}
			}
			
			for (var i = 0; i < num; i++) {
				self.move(balls[i]);
			}
		},
		// 气泡运动
		move: function(ball) {
			var self = this;
			ball.vy += self.gravity;
			ball.style.left = (ball.offsetLeft + ball.vx) + 'px';
			ball.style.top = (ball.offsetTop + ball.vy) + 'px';
			// 边界检测
			var T = self.T_bound, B = self.B_bound, L = self.L_bound, R = self.R_bound, BC = self.bounce;
			if (ball.offsetLeft + ball.diameter > R) {
				ball.style.left = R - ball.diameter + 'px';
				ball.vx *= BC;
			} else if (ball.offsetLeft < L) {
				ball.style.left = L + 'px';
				ball.vx *= BC;
			} 
			if (ball.offsetTop + ball.diameter > B) {
				ball.style.top = B - ball.diameter + 'px';
				ball.vy *= BC;
			} else if (ball.offsetTop < T) {
				ball.style.top = T + 'px';
				ball.vy *= BC;
			} 
		}
	};
	return { Screen: Screen }
}();

if (location.href.indexOf('forum') >= 10){
window.onload = function() {
		document.getElementById('forumdisplay').innerHTML += '';
		sc = Bubble.Screen('forumdisplay', { ballsnum: 6, spring: 0.8, bounce: -0.95, gravity: 0.1});
		sc.initialize();
}
}